<template>
  <view class="user-coachbroker-team" :style="{background:pageColor}">
    <fixed>
      <view class="fill-base pd-lg flex-between">
        <view v-for="item in tabList" :key="item.id" @click="changeTab(item.val)"
              class="tab-item flex-1 flex-center flex-column"
              :class="{'active':param.invitePeo == item.val}">
          {{ item.label }}
          <view class="activeLine radius" v-show="param.invitePeo == item.val"></view>
        </view>
      </view>
    </fixed>
    <view class="list-item flex-center fill-base mt-md ml-md mr-md pd-lg radius-16"
          v-for="(item,index) in list.data" :key="index">
      <image mode="aspectFill" class="avatar radius" :src="item.avatarUrl"></image>
      <view class="flex-1 ml-md">
        <view class="flex-between">
          <view class="f-title c-black text-bold max-300 ellipsis">
            {{ item.coach_name }}
          </view>
          <view class="f-desc max-200 ellipsis" style="color: #777;">
            {{ item.city }}
          </view>
        </view>
        <view class="flex-y-center f-desc c-caption" style="margin: 2rpx 0;">
          <view :style="{width:len==4?'180rpx':len==5?'200rpx':'160rpx'}">昵称:</view>
          <view class="c-title ellipsis" :style="{maxWidth:len==4?'320rpx':len==5?'300rpx':'340rpx'}">
            {{ item.nickName || '-' }}
          </view>
        </view>
        <view class="flex-y-center f-desc c-caption">
          <view :style="{width:len==4?'180rpx':len==5?'200rpx':'160rpx'}">入驻时间:</view>
          <view class="c-title">{{ item.addtime }}</view>
        </view>
      </view>
    </view>
    <load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading">
    </load-more>
    <abnor v-if="!loading&&list.data.length<=0&&list.current_page==1" :isCenter="true" type="USER"></abnor>
    <view class="space-footer"></view>
  </view>
</template>

<script>
import {
  mapState,
  mapMutations
} from "vuex"

export default {
  components: {},
  data() {
    return {
      tabList: [
        {
          val: 0,
          label: '邀请的技师'
        },
        {
          val: 1,
          label: '邀请的用户'
        }
      ],
      options: {},
      param: {
        page: 1,
        invitePeo: 0 // 0 是技师 1 是用户
      },
      list: {
        data: []
      },
      loading: true,
      lockTap: false,
      len: 3
    }
  },
  computed: mapState({}),
  onLoad(options) {
    this.options = options
    this.len = this.$t('action.agentName').length
    this.initIndex()
	// this.getList()
  },
  onPullDownRefresh() {
    // #ifndef APP-PLUS
    uni.showNavigationBarLoading()
    // #endif
    this.initRefresh()
    uni.stopPullDownRefresh()
  },
  onReachBottom() {
    if (this.list.current_page >= this.list.last_page || this.loading) return;
    this.param.page = this.param.page + 1;
    this.loading = true;
    this.getList();
  },
  methods: {
    ...mapMutations(['']),
    changeTab(val) {
      this.param.invitePeo = val;
      this.getList()
    },
    async initIndex(refresh = false) {
      this.$util.setNavigationBarColor({
        bg: this.primaryColor
      })
      await this.getList()
      // #ifdef H5
      if (!refresh) {
        this.$jweixin.hideOptionMenu()
      }
      // #endif
    },
    initRefresh() {
      this.param.page = 1;
      this.initIndex(true)
    },
    async getList() {
      let {
        list: oldList,
        param,
      } = this
      let newList = await this.$api.usernew.getMyInviter(param)
      if (this.param.page == 1) {
        this.list = newList
      } else {
        newList.data = oldList.data.concat(newList.data)
        this.list = newList
      }

      // this.list ={
      //   data: [{
      //     work_img: '-',
      //     coach_name: '-',
      //     city: '2',
      //     admin_name: '3',
      //     sh_time: '4',
      //   }
      //   ]
      // }
      this.loading = false
      this.$util.hideAll()
    }
  }
}
</script>


<style lang="scss">
.tab-item {
  color: #9d9d9d;
  .activeLine {
    width: 100rpx;
    height: 10rpx;
    background: #82d1ae;
    position: absolute;
    bottom: 0;
  }
}
.active {
  color: #82d1ae;
}

.user-coachbroker-team {

  .list-item {
    .avatar {
      width: 124rpx;
      height: 124rpx;
    }

    .text {
      color: #4D4D4D;
      margin-top: 6rpx;
    }

    .remove-btn {
      width: 146rpx;
      height: 56rpx;
      transform: rotateZ(360deg);
    }
  }
}
</style>
